<template>
  <el-container>
    <el-aside :width="sideWidth + 'px'">
      <div class="home-view_asider-header" v-pre>
        <img src="@/assets/img/z-mall-logo-white@1x.png" alt="" />
        <span v-show="logoTextShow">Z-Mall Admin</span>
      </div>
      <div class="home-view_aside-main">
        <!-- 一级 -->
        <el-scrollbar>
          <el-menu
            unique-opened
            :router="true"
            :default-openeds="['1', '3']"
            style="height: 100%"
            background-color="#2c3549"
            text-color="#fff"
            active-text-color="#ffd04b"
            :collapse-transition="false"
            :collapse="isCollapse"
          >
            <el-submenu
              v-for="list in menuTree"
              :key="list.id"
              :index="list.path"
            >
              <template v-slot:title>
                <i :class="list.icon_class_name"></i>
                <span slot="title">{{ list.name }}</span>
              </template>
              <!-- 二级 -->
              <el-menu-item
                v-for="item in list.children"
                :key="item.id"
                :index="item.path"
              >
                <i :class="item.icon_class_name"></i>
                {{ item.name }}</el-menu-item
              >
            </el-submenu>
          </el-menu></el-scrollbar
        >
      </div>
    </el-aside>
    <el-container>
      <el-header class="header">
        <span
          :class="collapseBtnClass"
          style="cursor: pointer"
          @click="collapse"
        ></span>
        <el-breadcrumb separator="/ ">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item
            v-for="item in breadList"
            :key="item.path"
            :to="{ path: item.path }"
            >{{ item.meta.title }}</el-breadcrumb-item
          >
        </el-breadcrumb>
        <el-dropdown>
          <span class="el-dropdown-link flex">
            欢迎您！
            {{ userinfo.nickname || userinfo.username }}
            <!-- {{ userinfo.avatar }} -->
            <img :src="userinfo.avatar" alt="" />
            <!-- 头像加字 -->
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>尚未开发</el-dropdown-item>
            <el-dropdown-item disabled>尚未开发</el-dropdown-item>
            <el-dropdown-item divided @click.native="logout"
              >注销</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-main>
        <el-tabs
          type="card"
          v-model="activeName"
          closable
          @tab-click="handleClick"
          @tab-remove="removeTab"
        >
          <el-tab-pane
            :key="item.name"
            v-for="item in tabList"
            :label="item.label"
            :name="item.name"
          >
          </el-tab-pane>
        </el-tabs>
        <!-- 通过路由加载组件 -->
        <router-view> </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<style></style>

<script>
import { mapActions, mapState } from "vuex";
import { remove } from "@/utils/store";

export default {
  name: "HomeView",
  computed: {
    ...mapState(["menuTree"]),
    ...mapState("user", ["userinfo"]),
    breadList() {
      if (this.$route.path == "/" || this.$route.path == "/index") {
        return [];
      } else {
        return this.$route.matched;
      }
    },
  },
  watch: {
    $route: {
      handler(val) {
        console.log(val);
        // this.breadList = val.matched;
        if (this.tabList.some((v) => v.name == val.path)) return;
        this.tabList.push({ label: val.meta.title, name: val.path });
        this.activeName = val.path;
        // 添加tab时存储
        localStorage.setItem("tabList", JSON.stringify(this.tabList));
        localStorage.setItem("activeName", val.path);
      },
      deep: true,
    },
    // activeName(val) {
    //   this.$router.push(val);
    // },
  },
  methods: {
    ...mapActions(["getMenuTree"]),
    ...mapActions("user", ["getUser"]),

    removeTab(tabName) {
      let index = this.tabList.findIndex((v) => v.name == tabName);
      this.tabList.splice(index, 1);
      //移除tab存储
      localStorage.setItem("tabList", JSON.stringify(this.tabList));
      this.activeName = this.tabList[this.tabList.length - 1].name;
      localStorage.setItem("activeName", this.activeName);
      this.$router.push(this.activeName);
    },

    handleClick(com) {
      this.$router.push(this.tabList.find((v) => v.label == com.label).name);
      localStorage.setItem(
        "activeName",
        this.tabList.find((v) => v.label == com.label).name
      );
    },
    logout() {
      remove("token");
      this.$router.push("/login"); //跳回登录地址
    },
    appear() {
      this.div_Show = !this.div_Show;
    },
    collapse() {
      //collapse为false时展开，为true时折叠。
      this.isCollapse = !this.isCollapse;
      //折叠时
      if (this.isCollapse) {
        //折叠时宽度为64
        this.sideWidth = 58;
        //变换图标样式
        this.collapseBtnClass = "el-icon-s-unfold";
        //折叠时不展示名称“ML后台管理系统”
        this.logoTextShow = false;
        //展开时
      } else {
        //展开时宽度为200
        this.sideWidth = 200;
        //变换图标样式
        this.collapseBtnClass = "el-icon-s-fold";
        //展开时展示名称“ML后台管理系统”
        this.logoTextShow = true;
      }
    },
  },
  created() {
    this.getMenuTree();
    // this.getUserinfo();
    if (!this.userinfo.username) {
      this.getUser();
    }
    console.log(this.userinfo);
    if (localStorage.getItem("tabList")) {
      this.tabList = JSON.parse(localStorage.getItem("tabList"));
    }
    if (localStorage.getItem("activeName")) {
      this.activeName = localStorage.getItem("activeName");
    }
  },
  data() {
    return {
      activeName: "/",
      tabList: [{ label: "首页", name: "/" }],
      div_Show: false,
      //默认图标为"el-icon-s-fold"
      collapseBtnClass: "el-icon-s-fold",
      //菜单默认不折叠
      isCollapse: false,
      //默认宽度200
      sideWidth: 200,
      logoTextShow: true,
      //   isCollapse: true,
      menutree: [],
    };
  },
};
</script>
<style lang="scss">
.el-scrollbar_wrap {
  overflow: hidden;
  height: 105%;
  box-sizing: content-box;
}
.el-scrollbar_view {
  width: 100%;
}

.el-aside {
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  background-color: #2c3549;
  height: 100vh;
}
span {
  color: #ccc;
  margin-left: 8px;
  margin-top: 20px;
}
img {
  // vertical-align: middle;
  width: 50px;
  height: 50px;
}
.home-view_asider-header {
  height: 75px;
  display: flex;
  padding-top: 15px;
  text-align: center;
  line-height: 10px;
  > img {
    vertical-align: middle;
    width: 50px;
    height: 50px;
  }
}
.header {
  border: 3px solid #ccc;
  padding: 0;
  display: flex;
  > .el-dropdown {
    position: absolute;
    right: 15px;
    img {
      border-radius: 50%;
      margin-top: -18px;
    }
  }
}
.el-avatar {
  margin-top: 20px;
}

.tab {
  height: 60px;
  background-color: pink;
}
.el-icon-s-fold:before,
.el-icon-s-unfold:before {
  font-size: 40px;
}
.logout {
  //   display: none;
  width: 80px;
  height: 60px;
  border: 1px solid #fff;
  margin-left: -30px;
  box-shadow: -2px 2px 5px #ccc;
  > div {
    text-align: center;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
  }
}
.el-breadcrumb {
  font-size: 14px;
  line-height: 3;
}
.avatar {
  margin-top: 20px;
}
.el-calendar-table .el-calendar-day {
  text-align: center;
  height: 30px;
}
</style>
